<template>
  <div class="container-item-tags">
    <div v-if="loading" class="item-tag-base item-tag-name-1">加载中...</div>
    <div v-for="(temp,index) in tag_1" :key="index" class="item-tag-1">
      <div class="item-tag-base item-tag-name-1">
        {{ temp.name }}
        <!-- <i class="el-icon-delete" @click="delTag(temp,index)" /> -->
      </div>
      <itemTag2 :tag-id="temp.id" @checked="checkedHandler" />
    </div>
    <!-- <div class="item-tag-base item-add-tag-btn el-icon-plus" @click="addTag_1" /> -->
  </div>
</template>

<script>
// api
import { getTag_1, createTag_1, deleteTag_1,searchTag } from '@/api/miva'
// item
import itemTag2 from './item-tag-2'
export default {
  components: { itemTag2 },
  props: {
    type: {
      type: [String, Number],
      default: 1
    }
  },
  data() {
    return {
      loading: true,
      tag_1: [],
      bufferTag_2: {}
    }
  },
  async mounted() {
    await this.getTag_1()
    this.loading = false
  },
  methods: {
    //   获取一级标签
    async getTag_1() {
      console.log(this.type)
      const res = await getTag_1({ project_type_id: this.type })
      const arr = []
      for (const val of res.data) {
        arr.push({ id: val.id, name: val.tag_1_name })
      }
      this.tag_1 = arr
    },
    //   添加一级标签
    async addTag_1() {
      this.$prompt('请输入新的一级标签', '添加新标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async({ value }) => {
          if (value) {
            await createTag_1({
              project_type_id: this.type,
              tag_1_name: value
            })
            await this.getTag_1()
          }
        })
        .catch(() => {})
    },
    // 删除二级标签
    async delTag(temp, index) {
      this.$confirm(`确认删除标签 [ ${temp.name} ] 嘛?`, '删除标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          deleteTag_1({ id: temp.id })
          this.tag_1.splice(index, 1)
        })
        .catch(() => {})
    },
    // 融合二级标签数据
    async checkedHandler(data) {
      this.bufferTag_2[data.id] = data.data
      const arr = []
      for (const key in this.bufferTag_2) {
        if (this.bufferTag_2[key]) arr.push(this.bufferTag_2[key])
      }
      // this.$emit('chekced', arr.toString())
      console.log(arr.toString())
      const res = await searchTag({tags:arr.toString(), type:this.type})
      console.log(res.data)
      this.$emit('checked', res.data)
    }
  }
}
</script>

<style lang="less" scoped>
// @import "~@/styles/variables.scss";

.container-item-tags {
  margin-bottom: 10px;
  .item {
    &-tag-1 {
      padding: 5px 0;
      display: flex;
      align-items: center;
    }
    &-add-tag-btn {
      border: 1px dashed #888 !important;
      font-weight: bold;
    }
    &-tag-base {
      width: 90px;
      min-width: 90px;
      height: 21px;
      line-height: 21px;
      display: inline-block;
      border-radius: 30px;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      padding: 3px;
    }
    &-tag-name-1 {
      border-color: #e44f50 !important;
      background-color: #e44f50;
      color: #fff;
    }
  }
}
</style>
